<template>
    <div class="header">
        <h1>
            <!-- 添加一个 slot 插槽 作为标题内容的占位符 -->
            <slot></slot>
        </h1>
    </div>
</template>

<script>

</script>

<style lang="less" scoped>
.header {
    // 相对于浏览器固定定位
    position: fixed;
    // 距顶0像素
    top: 0;
    // z轴
    z-index: 99;
    background: #ed4040;
    width: 100%;
    // 由于已经引入了JS库 将屏幕的宽度除以3.75，得到1rem 的值 使用rem 让页面更加灵活
    height: .44rem;
    // 行高和高度一致是为了垂直居中
    line-height: .44rem;
    text-align: center;
    box-shadow: 0 1px 1px rgba(100, 100, 100, .1);
    h1 {
        font-size: .18rem;
        color: #fff;
    }
}
</style>